<template>
  <GlobalLayout>
    <LayoutSite fixedHeader>
      <template #title>
        <img src="/wowon/public/logo.png" alt="logo" style="margin-right: 8px" />
        <h3>wowon Admin</h3>
      </template>

      <template #extra> <div>Admin</div> </template>
      <LayoutSider :class="[$route.meta.padding !== false && 'with-content-padding']">
        <template #body>
          <el-menu :default-active="$route.path" router unique-opened>
            <BlockMenu :menus="filteredRoutes" />
          </el-menu>
        </template>

        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </LayoutSider>
    </LayoutSite>
  </GlobalLayout>
</template>

<script setup>
import { computed } from 'vue';
import { LayoutSite, LayoutSider, BlockMenu } from '@wowon/layouts';
import GlobalLayout from './global-layout.vue';

import { useRouter } from 'vue-router';

const router = useRouter();

const filteredRoutes = computed(() => {
  const routes = router.options.routes;
  return routes.find((route) => route.path === '/')?.children || [];
});
</script>

<style lang="less">
.with-content-padding .page-content {
  padding: var(--size-cell-gap);
}
</style>
